<template>
	<view class="information informationYs">
		<cu-custom :isBack="true" textWeight="600" textColor="#333333" textSize="16" fhColor="#979797">
			<block slot="content">店铺资料</block>
		</cu-custom>
		<view class="bac"></view>
		<scroll-view class="container" scroll-y="true" :style="{height:height-CustomBar+'px'}">
			<view class="details">
				<view class="list logo">
					<view class="title">店铺logo</view>
					<view class="right">
						<view class="image" v-if="!stop" @click="ChooseImageBtn(1,'logo')">
							<image v-if="formData.shopLogo" :src="formData.shopLogo" mode="aspectFit"></image>
							<image v-if="!formData.shopLogo" :src="imgUrl+'upload.png'" mode=""></image>
						</view>
						<view class="image" v-if="stop">
							<image v-if="formData.shopLogo" :src="formData.shopLogo" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="title">店铺名称</view>
					<view class="right">
						<input class="input" v-if="stop" disabled="readonly" type="text" placeholder="请输入店铺名称"
							v-model="formData.shopName">
						<input class="input" v-if="!stop" maxlength="15" type="text" placeholder="请输入店铺名称"
							v-model="formData.shopName">
					</view>
				</view>
				<view class="list ps">
					<view class="title titleYs">营业时间</view>
					<view class="right">
						<textarea class="input" v-if="stop" auto-height="true" disabled="readonly" type="text"
							placeholder="请输入营业时间" v-model="formData.openTime" placeholder-class="inputYs" />
						<textarea class="input" v-if="!stop" maxlength="40" auto-height="true" type="text"
							placeholder="请输入营业时间" v-model="formData.openTime" placeholder-class="inputYs" />
					</view>
				</view>
				<view class="list">
					<view class="title">联系人</view>
					<view class="right">
						<input class="input" v-if="stop" disabled="readonly" type="text" placeholder="请输入联系人"
							v-model="formData.contacts" placeholder-class="inputYs">
						<input class="input" v-if="!stop" maxlength="10" type="text" placeholder="请输入联系人"
							v-model="formData.contacts" placeholder-class="inputYs">
					</view>
				</view>
				<view class="list">
					<view class="title">联系电话</view>
					<view class="right">
						<input class="input" v-if="stop" disabled="readonly" type="number" placeholder="请输入联系电话"
							v-model="formData.contactsPhone" placeholder-class="inputYs">
						<input class="input" v-if="!stop" maxlength="11" type="number" placeholder="请输入联系电话"
							v-model="formData.contactsPhone" placeholder-class="inputYs">
					</view>
				</view>
				<view class="list ps">
					<view class="title titleYs">其他备注</view>
					<view class="right">
						<textarea class="input" v-if="stop" disabled="readonly" type="textarea" auto-height="true"
							placeholder="请输入备注" v-model="formData.remark" placeholder-class="inputYs" />
						<textarea class="input" v-if="!stop" maxlength="40" type="textarea" confirm-type="done"
							auto-height="true" placeholder="请输入备注" v-model="formData.remark"
							placeholder-class="inputYs" />
					</view>
				</view>
				<view class="list">
					<view class="title titleYs">店内照片</view>
					<view class="right last" :class="formData.shopImages.length>2?'star':''" v-if="formData.shopImages">
						<view class="lista" v-for="(i,n) in formData.shopImages" :key="n">
							<view class="image picture" @click="seeImg(formData.shopImages,n)">
								<image class="itemImg" v-if="i" :src="i" mode=""></image>
								<image class="del" v-if="!stop" @click.stop="delClick(n)" :src="imgUrl+'Order/del.png'"
									mode=""></image>
							</view>
						</view>
						<view class="lista" v-if="formData.shopImages.length<9&&!stop">
							<view class="picture" @click="ChooseImageBtn(9-formData.shopImages.length,'picture')">
								<image class="upload" :src="imgUrl+'upload.png'" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn" v-if="!stop" @click="updata">
				保存
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				height: '',
				// 导航栏距离
				CustomBar: this.CustomBar,
				imgUrl: this.$http.imgUrl + '/static/',
				image: false,

				// 店铺信息
				formData: '',
				shopId: '',
				stop: false, //是否是自己店铺可以修改店铺信息
			}
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onLoad({
			id
		}) {
			this.shopId = id
			// 判断是否是自己店铺
			if (this.userInfo.shopId !== +this.shopId) {
				this.stop = true
			}
			this.getData()
			// 获得上传得图片地址
			uni.$off('gainImage_a')
			uni.$on('gainImage_a', res => {
				console.log(res, '获得上传得图片地址')
				if (res.name === 'logo') {
					this.formData.shopLogo = res.imgUrl
				} else if (res.name === 'picture') {
					this.formData.shopImages.push(res.imgUrl)
				}
			})

		},

		mounted() {
			// console.log(this.formData, 'formdata');
			this.height = uni.getSystemInfoSync().windowHeight
		},
		methods: {
			// 获取店铺数据
			async getData() {
				const url = this.api.new_shop.shopDetails
				const {
					data
				} = await this.$http.get(url, {
					id: this.shopId
				})
				// console.log(data, 'getdata');
				this.formData = data.data
				this.formData.shopImages = JSON.parse(data.data.shopImages)
				// console.log(this.formData, 'formdata');
			},
			// 图片上传按钮
			ChooseImageBtn(num, text) {
				if (text === 'picture' && this.formData.shopImages.length >= 9) return
				this.$ChooseImage.ChooseImage(num, text)
			},
			// 删除图片
			delClick(n) {
				this.formData.shopImages.splice(n, 1)
			},
			// 查看图片
			seeImg(imgList, index) {
				var arr = []
				for (var i in imgList) {
					arr.push(imgList[i])
				}
				uni.previewImage({
					urls: arr,
					current: index
				})
			},
			// 上传店铺信息
			async updata() {
				const url = this.api.new_shop.shopUpdate
				const {
					data
				} = await this.$http.post(url, {
					// id:this.shopId,
					...this.formData,
					shopImages: JSON.stringify(this.formData.shopImages)
				})
				console.log(data);
				if (data.code === 200) {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: data.message
					})
				}
			}
		}
	}
</script>
<style lang="scss">
	.informationYs {
		.inputYs {
			font-size: 28rpx;
			font-weight: 400;
		}
	}
</style>
<style lang="scss" scoped>
	.information {
		.bac {
			height: 100vh;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background: url(https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/bac.png) no-repeat;
			background-size: 100%;
		}

		.container {
			position: relative;
			width: 100%;
			padding: 24rpx 24rpx 0 24rpx;


			.details {
				width: 100%;
				// height: 1064rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(153, 153, 153, 0.12);
				border-radius: 24rpx;
				padding: 0 24rpx;

				.list {
					width: 100%;
					border-bottom: 2rpx solid rgba(51, 51, 51, 0.08);
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 32rpx 0;

					&.logo {
						align-items: center;
					}

					&.ps {
						max-height: 140rpx;
						overflow: hidden;

						.right {
							max-width: 454rpx;
							// padding-bottom: 16rpx;
						}
					}

					&:last-child {
						padding-bottom: 16rpx;
						border-bottom: 0;

						.title {
							padding-bottom: 16rpx;
						}

						.right {
							flex: 1;
							display: flex;
							justify-content: flex-end;
							min-height: 92rpx;
						}

						.star {
							justify-content: flex-start;
						}
					}

					.title {
						width: 200rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}

					.titleYs {
						align-self: flex-start;
					}

					.right {
						display: flex;
						flex-wrap: wrap;

						.input {
							text-align: right;
							width: 454rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #333333;
						}

						.image {
							width: 120rpx;
							height: 120rpx;
							// background: red;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.lista {
							width: 33.33%;
							margin-bottom: 16rpx;

							.picture {
								position: relative;
								width: 140rpx;
								height: 140rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								// border: 2rpx solid #979797;
								border-radius: 8rpx;
								overflow: hidden;
								background: rgba(153, 153, 153, 0.12);

								.del {
									position: absolute;
									top: 0rpx;
									right: 0rpx;
									width: 26rpx;
									height: 26rpx;
								}

								.itemImg {
									width: 100%;
									height: 100%;
								}

								.upload {
									width: 100%;
									height: 100%;
									// background: rgba(153,153,153,0.12);
								}
							}
						}
					}
				}
			}

			.btn {
				margin: 120rpx auto 0;
				width: 526rpx;
				height: 76rpx;
				background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
				border-radius: 38rpx;
				text-align: center;
				line-height: 76rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #FFFFFF;
			}
		}
	}
</style>